<div class="el-table-container">
  <!-- 隐藏区域：强制编译子指令 -->
  <div style="display: none;">
    <ng-transclude></ng-transclude> <!-- 关键修正 -->
  </div>
  <!-- 表格结构 -->
  <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
    ng-class="{ 'el-table--striped': stripe, 'el-table--border': border }">

    <div class="el-table__header-wrapper">
      <!-- 动态生成表头 -->
      <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: {{tableWidth}}px;">
        <colgroup>
          <col ng-repeat="col in columns" width="{{col.width}}">
        </colgroup>
        <thead>
          <tr>
            <th ng-repeat="col in columns" class="is-leaf el-table__cell">{{col.label}}
              <span class="caret-wrapper" ng-if="col.sortable" ng-click="sort(col.prop, 'asc', $event)"><i
                  class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>
            </th>
          </tr>
        </thead>
      </table>
    </div>

    <div class="el-table__body-wrapper">
      <!-- 动态生成表体 -->
      <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: {{tableWidth}}px;">
        <colgroup>
          <col ng-repeat="col in columns" width="{{col.width}}">
        </colgroup>
        <tbody>
          <tr ng-repeat="row in data" ng-class="{ 'el-table__row--striped': stripe && $even }" class="el-table__row">
            <td ng-repeat="col in columns" class="el-table__cell">
              <div class="cell" ng-if="!col.templateFlag">{{row[col.prop]}}</div>
              <div class="cell" ng-if="col.templateFlag">
                <div compile="col.template(row)"></div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 左侧固定列 -->
    <div ng-if="leftFixedColumns.length" class="el-table__fixed"
      style="left: 0; width: {{leftWidth}}px; height: {{tableHeight}}px;">
      <div class="el-table__fixed-header-wrapper">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="height: {{headerHeight}}px;">
          <colgroup>
            <col ng-repeat="col in leftFixedColumns" width="{{col.width}}">
          </colgroup>
          <thead>
            <tr>
              <th ng-repeat="col in leftFixedColumns" class="is-leaf el-table__cell">
                {{col.label}}
                <span class="caret-wrapper" ng-if="col.sortable" ng-click="sort(col.prop, 'asc', $event)"><i
                    class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>
              </th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="el-table__fixed-body-wrapper" style="top: {{headerHeight}}px" sync-scroll>
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
          <colgroup>
            <col ng-repeat="col in leftFixedColumns" width="{{col.width}}">
          </colgroup>
          <tbody>
            <tr ng-repeat="row in data" class="el-table__row">
              <td ng-repeat="col in leftFixedColumns" class="el-table__cell">
                <div class="cell" ng-if="!col.templateFlag">{{row[col.prop]}}</div>
                <div class="cell" ng-if="col.templateFlag">
                  <div compile="col.template(row)"></div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 右侧固定列 -->
    <div ng-if="rightFixedColumns.length" class="el-table__fixed-right"
      style="left: {{tableWidth - leftWidth}}px ; width: {{leftWidth}}px; height: {{tableHeight}}px;">
      <div class="el-table__fixed-header-wrapper">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="height: {{headerHeight}}px;">
          <colgroup>
            <col ng-repeat="col in rightFixedColumns" width="{{col.width}}">
          </colgroup>
          <thead>
            <tr>
              <th ng-repeat="col in rightFixedColumns" class="is-leaf el-table__cell">
                {{col.label}}
                <span class="caret-wrapper" ng-if="col.sortable" ng-click="sort(col.prop, 'asc', $event)"><i
                    class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>
              </th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="el-table__fixed-body-wrapper" style="top: {{headerHeight}}px" sync-scroll>
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
          <colgroup>
            <col ng-repeat="col in rightFixedColumns" width="{{col.width}}">
          </colgroup>
          <tbody>
            <tr ng-repeat="row in data" class="el-table__row">
              <td ng-repeat="col in rightFixedColumns" class="el-table__cell">
                <div class="cell" ng-if="!col.templateFlag">{{row[col.prop]}}</div>
                <div class="cell" ng-if="col.templateFlag">
                  <div compile="col.template(row)"></div>
                  
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>